<!--
 * @Descripttion: 
 * @Author: jhw
 * @Date: 2023-07-21 16:10:22
 * @LastEditors: jhw
 * @LastEditTime: 2023-07-24 17:19:57
-->
<template>
  <div>
    <h1>1.文字过长向左滑动效果</h1>
    <div class="box1">
      <div v-fontMove="moveConfig" class="text1">开头-啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊啊-结尾</div>
    </div>
  </div>
</template>

<script setup lang="ts">
const moveConfig = {
  // nearby: 3,
  speed: 1,
};
</script>

<style lang="scss" scoped>
.box1 {
  width: 300px;
  font-size: 20px;
  height: 30px;
  background: #000;
  color: #fff;
  overflow: hidden;

  .text1 {
    width: 100%;
    height: 100%;
    transform: translateX(0);
    white-space: nowrap;
  }
}
</style>
